<template>
  <div class="elm-edit f_edit">
    <elm-page-bb class="ei_edit" v-loading="loading">

      <el-form size="small" label-width="240px" style="padding: 15px;">
        <elm-row v-for="nn_item in itemList">
          <el-form-item :label='nn_item.title'>
            <elm-tag :items="nn_item.check_user_show" style="margin-left: -3px;" width="200px">
              <template  #text="{ item }">
                <span style="margin-right: 5px;">{{item.name}}</span>
              </template >
              <elm-user :extra_id="nn_item.id" @changed_with_id="userSelected" v-model="nn_item.check_user_temp"></elm-user>
            </elm-tag>
          </el-form-item>
        </elm-row>
      </el-form>


      <template #bottom>
        <el-button type="success" size="small" @click="submit">确定并提交</el-button>
        <el-button size="small" @click="close">取消</el-button>
      </template>
    </elm-page-bb>
  </div>
</template>

<script>
export default {
  extends: elmVueBase,
  data() {
    return {
      loading:false,

      DE_INFO: null,

      dataList:[],
      itemList:[],
    }
  },
  mounted() {
    this.DE_INFO = elm.dialog.request;

    this.dataList = this.DE_INFO.needDynamicUserNodeList;

    this.v_getData();
  },
  methods: {
    async v_getData(){
      this.itemList = [];

      let itemList = [];
      for(let i=0;i<this.dataList.length;i++){
        let dd = this.dataList[i];
        let item = {
          id:dd.id,
          title:'选择 '+dd.title+' 节点参与者',
          check_user_show:[],
          check_user_temp:null,
        };
        itemList.push(item);
      }
      this.itemList = itemList;

    },

    async submit() {
      let node_id = '';
      let user_id = '';
      for(let i=0;i<this.itemList.length;i++){
        let item = this.itemList[i];
        if(!this.em(node_id)){
          node_id = node_id+';';
          user_id = user_id+';';
        }
        node_id = node_id+item.id;
        let temp_user_id = '';
        for(let kk=0;kk<item.check_user_show.length;kk++){
          if(!this.em(temp_user_id)){
            temp_user_id = temp_user_id+',';
          }
          temp_user_id = temp_user_id + item.check_user_show[kk].id;
        }
        user_id = user_id + temp_user_id;
      }

      this.DE_INFO.callVue.submitWithDynamicUserId(node_id,user_id);

      this.v_cancle();
    },
    userSelected(id,name,item_id){
      for(let i=0;i<this.itemList.length;i++){
        let item = this.itemList[i];
        if(item_id == item.id){
          for(let kk=0;kk<item.check_user_show.length;kk++){
            if(item.check_user_show[kk].id == id){
              this.$message.error('已添加的用户'); return;
            }
          }
          item.check_user_show.push({'id':id,'name':name});
          item.check_user_temp = null;
        }
      }

    },

    v_cancle(){
      this.close();//extends: elmVueBase
    },

    em(s) {
      if (s == null || s == '') { return true; }
      else { return false; }
    },

  }
}
</script>
<style>
.f_edit .elm-body{padding: 5px;}
</style>